<template>
    <div class="box">
        <header class="header">
            <van-search v-model="value" @click="Search" placeholder="请输入搜索关键词" />
        </header>

        <div class="content">
            <div class="left">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item @click="rmFn" :title="title" />
                    <van-sidebar-item @click="changeIndex" :title="item" v-for="(item, index) in categorylist"
                        :key="index" />
                </van-sidebar>
            </div>

            <div class="right" v-for="(item, index) in categorybrandlist" :key="index">
                <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                <p>{{ item.brand }}</p>
            </div>

            <div v-if="categorybrandlist.length == 0" class="rmsea">
                <div v-for="item in seckilllist" :key="item.img1" class="rmimg">
                    <router-link :to="{ path: '/detail/' + item.proid }">
                        <van-image width="100" height="100" :src="item.img1" />
                        <p>{{ item.brand }}</p>
                    </router-link>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import Vue from 'vue';
import { Sidebar, SidebarItem, Search, Image as VanImage } from 'vant';

import { getCategorylist, getSeckillList, getCategorybrandlist } from "@/api/kind";

Vue.use(Search);
Vue.use(Sidebar);
Vue.use(SidebarItem)
Vue.use(VanImage);


export default {
    data() {
        return {
            value: '',
            title: '热门搜索',
            activeKey: 0,
            // 左侧列表
            categorylist: [],
            category: '',
            // brand右边的需要渲染的
            categorybrandlist: [],
            // 热门搜索
            seckilllist: [],
        };
    },
    methods: {
        rmFn() {
            // 热门搜索
            getSeckillList().then((res) => {
                console.log(res)
                this.seckilllist = res.data;
                this.categorybrandlist = []
                console.log(res.data);
            })

        },
        Search() {
            this.$router.push('/search')
        },
        changeIndex(index) {
            console.log(index);
            this.category = this.categorylist[index - 1]
            getCategorybrandlist({ category: this.category })
                .then(res => {
                    console.log(res);
                    this.categorybrandlist = res.data;
                })
        }
    },
    mounted() {
        // 分类页表
        getCategorylist().then((res) => {
            // console.log(res)
            this.categorylist = res.data;
            // console.log(res.data);
        })
        // 热门搜索
        getSeckillList().then((res) => {
            // console.log(res)
            this.seckilllist = res.data;
            // console.log(res.data);
        })

        // 右侧
        getCategorybrandlist({ category: this.category })
            .then(res => {
                // console.log(res);
                this.categorybrandlist = res.data;
            })
    }

}
</script>
<style scoped>
.box .content {
    width: 100%;
    height: 100%;
}

.left {
    float: left;
}

.right {
    float: left;
    padding: 20px;
    text-align: center;
}

.rmsea {
    display: flex;
    flex-wrap: wrap;
}

.rmimg {
    margin: 20px;
}
</style>